<template>
  <div class="stat-row">
    <div class="stat-col" v-for="(item, idx) in stats" :key="idx">
      <Card :bordered="false" dis-hover>
        <div class="stat-title">
          <Icon :type="item.icon" class="stat-icon" :style="{color: item.iconColor || '#2d8cf0'}" />
          {{ item.title }}
        </div>
        <div class="stat-value">{{ item.value }}</div>
      </Card>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ContractStat',
  props: {
    stats: {
      type: Array,
      default: () => []
    }
  }
};
</script>
<style scoped>
.stat-row {
  display: flex;
  margin-top: 24px;
  gap: 0 16px;
}
.stat-col {
  flex: 1 1 0;
}
.stat-title {
  font-size: 16px;
  color: #888;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.stat-icon {
  font-size: 22px;
  margin-right: 8px;
  /* color 由行内 style 控制 */
}
.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}
</style> 